<template>
  <div class="container">
    <swiper class="h-290px" circular :indicator-dots="false" :autoplay="true">
      <swiper-item v-for="(pic, i) in bannerList" :key="i">
        <image class="w-full h-280px" :src="pic" alt="" mode="scaleToFill" />
      </swiper-item>
    </swiper>

    <view class="content">
      <view class="action-cards">
        <view class="card" @click="jump('/pages/moments/edit/index')">
          <wd-icon name="upload" size="32px" color="#1296db" />
          <text class="card-title">预制朋友圈</text>
          <text class="card-desc">提前添加朋友圈内容</text>
        </view>

        <div class="w-2px bg-[#F2F2F2] my-20px" />

        <view class="card" @click="jump('/pages/moments/drafts/index')">
          <wd-icon name="share" size="32px" color="#13c2c2" />
          <text class="card-title">发送</text>
          <text class="card-desc">一键复制朋友圈圈</text>
        </view>
      </view>

      <view class="feature-cards">
        <view
          class="feature-card"
          @click="jump('/pages/moments/drafts/index?showTime=T')"
        >
          <div class="flex items-center">
            <wd-icon name="gift" size="18px" color="#722ed1" />
            <text class="feature-title">朋友圈计划</text>
          </div>
          <text class="feature-desc">查看近一周朋友圈</text>
        </view>

        <view class="feature-card" @click="jump('/pages/moments/images/index')">
          <div class="center">
            <wd-icon name="camera" size="18px" color="#eb2f96" />
            <text class="feature-title">图文素材库</text>
          </div>
          <text class="feature-desc">图片组合</text>
        </view>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
import { jump } from '@/utils/common';

const bannerList = ref([
  'https://img02.mockplus.cn/rp/image/2025-02-26/f470bcc0-f41e-11ef-b084-7d6a9258ce01.png',
  'https://img02.mockplus.cn/rp/image/2025-02-26/828c5ac0-f41d-11ef-802e-372244d67b2d.png',
  'https://img02.mockplus.cn/rp/image/2025-02-26/b642c4c0-f41e-11ef-9432-990bdd1b0a24.png'
]);
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 15px;
}

.action-cards {
  z-index: 1;
  display: flex;
  gap: 15px;
  margin-top: -30px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px;
  cursor: pointer;
}

.card-title {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.card-desc {
  margin-top: 5px;
  font-size: 12px;
  color: #999;
}

.feature-cards {
  display: flex;
  gap: 15px;
}

.feature-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  padding-top: 23px;
  background-color: rgb(234, 235, 236);
  border-radius: 8px;
}

.feature-title {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.feature-desc {
  margin-top: 4px;
  font-size: 12px;
  color: #999;
  text-align: center;
}
</style>
